<template>
    <rx-dialog @handOk="handleOk" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <a-form-model ref="form" :model="mdl" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
                    <a-form-model-item :label="i18n('name','名称')" prop="name">
                        <a-input-group compact>
                            <a-select style="width:30%;" @change="insertScript">
                                <a-select-opt-group>
                                    <span slot="label"><a-icon type="user"/>{{ i18n('proVar', '项目变量') }}</span>
                                    <a-select-option :value="item.value" v-for="(item,index) in variableProjectAry" :title="getLabel(item.label)">
                                        {{ getLabel(item.label) }}
                                    </a-select-option>
                                </a-select-opt-group>
                                <a-select-opt-group>
                                    <span slot="label"><a-icon type="user"/>{{ i18n('CustomVar', '自定义变量') }}</span>
                                    <a-select-option :value="item.value" v-for="(item,index) in variableCustomAry" :title="getLabel(item.label)">
                                        {{ getLabel(item.label) }}
                                    </a-select-option>
                                </a-select-opt-group>
                                <a-select-opt-group>
                                    <span slot="label"><a-icon type="user"/>{{ i18n('GlobalVar', '全局变量') }}</span>
                                    <a-select-option :value="item.value" v-for="(item,index) in variableGlobalAry" :title="getLabel(item.label)">
                                        {{ getLabel(item.label) }}
                                    </a-select-option>
                                </a-select-opt-group>
                            </a-select>
                            <a-input ref="name" style="width:65%;" :placeholder="i18n('name','请输入名称','input')"
                                     v-model="mdl.name"/>
                        </a-input-group>
                    </a-form-model-item>
                </a-form-model>
            </div>
        </rx-layout>
    </rx-dialog>
</template>
<script>
import {RxDialog, BaseFormModel, Util} from "@lowcode/jpaas-common-lib";

export default {
    name: 'FormCodegenFilePathEdit',
    mixins: [BaseFormModel],
    props: {
        data: Object,
        globarAry: Array,
        customAry: Array
    },
    components: {
        RxDialog,
    },
    data() {
        return {
            variableProjectAry: [
                {label: this.i18n('projectVar', '项目变量名'), value: "projectVar"},
                {label: this.i18n('projectKey', '项目别名'), value: "projectKey"}
            ],
            variableGlobalAry: [],
            variableCustomAry: [],
            rules: {
                name: [{required: true, message: this.i18n('name', '请输入名称', 'input'), trigger: 'change'}]
            }
        }
    },
    created() {
        this.onload_();
    },
    methods: {
        getLabel(value){
            if(Object.prototype.toString.call(value) === "[object Object]"){
                return value[Util.getLanguage()]
            }else if(typeof value === "string" && value.includes('zh-CN')){
                let fn = new Function(`return ${value}`)()
                return fn[Util.getLanguage()]
            }
            return value
        },
        i18n(name, text, key) {
            return this.$ti18(name, text, "formCodegenProject.edit3", key);
        },
        insertScript(value) {
            var script = "{" + value + "}";
            this.$set(this.mdl, "name", (this.mdl.name || "") + script);
            this.$refs.name.focus();
        },
        onload_() {
            this.variableCustomAry = this.initAry(this.customAry);
            this.variableGlobalAry = this.initAry(this.globarAry);
            if (!this.data.id) {
                this.data.id = Util.randomId();
            }
            if (!this.data.path && this.data.parentPath) {
                this.mdl.path = this.data.parentPath + "/";
            }
            Object.assign(this.mdl, this.data);
        },
        initAry(ary) {
            if (ary) {
                return ary.map(item => {
                    return {value: item.value, label: item.label};
                });
            }
            return [];
        },
        handleOk(vm) {
            this.$refs.form.validate(valid => {
                if (!valid) {
                    vm.loading = false;
                    return;
                }
                this.resultData = this.mdl;
                Util.closeWindow(this, "ok");
            })
        }
    },
    watch: {
        "mdl.name": function (value) {
            let path = this.mdl.path;
            let idx = -1;
            if (path) {
                idx = path.lastIndexOf("/");
            }
            if (idx != -1) {
                path = path.substring(0, idx) + "/" + value;
            } else {
                path = value;
            }
            this.mdl.path = path;
        }
    }
}
</script>
<style>
body .ant-select-dropdown .ant-select-dropdown-menu-item{
    background: #fff;
}
.relick a {
    margin-right: 10px;
}

</style>
